import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Tag from '@/components/Tag'
import ShareSheet from '@/components/ShareSheet'
import css from './toolbar.module.scss'
import { setStorage, getStorage } from '@/utils/storage'
export default class BangumiToolbar extends PureComponent {
    shareRef = React.createRef()

    static propTypes = {
        detailData: PropTypes.object.isRequired
    }

    state = {
        favChecked: false,
        shareUrl: window.location.href
    }    

    get mediaInfo() {
        return this.props?.detailData?.mediaInfo ?? {}
    }    
    
    // 初始化收藏
    initFav = () => {
        const { detailData } = this.props
        const favs = getStorage('bangumi_history')
        const matchIndex = favs.findIndex(fav => fav.seasonId === detailData.mediaInfo.season_id)        
        this.setState({
            favChecked: matchIndex > -1
        })
    }
    // 存入/移出缓存
    setFav = ({ type, data, action = 'add' } = {}) => {        
        const vals = getStorage(type)
        const matchIndex = vals.findIndex(val => val.seasonId === data.mediaInfo.season_id)
        if (matchIndex === -1) {
            const { mediaInfo, mediaInfo: { title, cover } } = data
            const item = {
                seasonId: mediaInfo.season_id,
                title,
                cover,
                isHistory: 1,
                timestamp: new Date().getTime()
            }
            vals.unshift(item)
            setStorage(type, vals)
        } else {
            if (action === 'del') {
                vals.splice(matchIndex, 1)
                setStorage(type, vals)
            }
        }
    }

    // 处理收藏
    handleFav = () => {
        const { favChecked } = this.state
        const { detailData } = this.props
        this.setState({
            favChecked: !favChecked
        }, () => {
            this.setFav({
                type: 'bangumi_history',
                data: detailData,
                action: !favChecked ? '' : 'del'
            })
        })        
    }

    handleShare = () => {
        this.shareRef.current.show()
    }

    componentDidMount() {
        this.initFav()
    }

    render() {
        const { favChecked, shareUrl } = this.state
        const info = this.mediaInfo
        return (
            <div className={css['wrap']}>
                <div className={css['action']}>                    
                    <Tag 
                        className={`btn ${favChecked ? 'btn-active' : ''}`} 
                        size="large"
                        onClick={this.handleFav}
                    >
                        { favChecked ? '' : <i className="fa fa-heart"></i> }
                        { favChecked ? '已追番' : '追番' }
                    </Tag>
                    <Tag className="btn" size="large" onClick={this.handleShare}><i className="fa fa-share"></i> 分享</Tag>
                </div>
                <ShareSheet ref={this.shareRef} url={shareUrl} title={info.title} pic={info.cover} />
            </div>
        )
    }
}
